<template>
    <el-dialog :visible.sync="showAddModal" :append-to-body="true"
               :close-on-click-modal="false" width="50%"
               :close-on-press-escape="false" :show-close="false" class="ele-modal"
               :modal-append-to-body='false'>
        <h4 slot="title">{{nickname}}的优惠券</h4>
        <div class="product-detail-modal">
            <div>
                <h3 class="panel-title">所有优惠券</h3>
            </div>
            <el-row>
                <div class="alert alert-info" style="margin-bottom: 10px">
                    <a class="revision-btn" href="javaScript:void(0)" @click="batchDeleteRow">批量删除</a>&nbsp;&nbsp;
                </div>
            </el-row>
            <el-row>
                <template v-if="data != null">
                    <el-table ref="modalTable" :border="true" :data="data.list" tooltip-effect="dark"
                              :header-cell-style="{'background-color': '#F5F5F6'}" max-height="600"
                              align="center" class="list-table"
                              style="width: 100%">
                        <el-table-column type="selection" width="55" align="center">
                        </el-table-column>
                        <template v-for="columnName in columnNames">
                            <template>
                                <el-table-column :label="columnName.label" :prop="columnName.prop" align="center">
                                </el-table-column>
                            </template>
                        </template>
                        <el-table-column align="center" fixed="right" label="操作" width="220">
                            <template slot-scope="scope">
                                <el-button type="text" @click="onDelRow(scope.row.id)" size="small">
                                    删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
                <el-pagination style="float: right;margin-top: 10px" v-if="data != null && !$isEmptyArray(data.list)"
                               @current-change="handleCurrentChange" :current-page.sync="data.currPage"
                               :page-size="data.pageSize"
                               layout="total, prev, pager, next" :total="data.totalCount">
                </el-pagination>
            </el-row>
            <confirm-modal :showConfirmModal="showConfirmModal" @closeModal="closeConfirmModal" :isSingle="isSingle"
                           @submitModal="submitBatchDeleteRow"></confirm-modal>
        </div>
        <div slot="footer" class="row" style="text-align: right;margin-right: 5px;">
            <a class="revision-btn" href="javaScript:void(0)" @click="onCancel">确 定</a>
        </div>
    </el-dialog>
</template>

<script>
    import ConfirmModal from "../../components/confirmModal";

    export default {
        name: "viewUserCouponModal",
        components: {ConfirmModal},
        props: {
            showAddModal: {
                type: Boolean,
                default: false
            },
            CustomersId: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                showConfirmModal: false,
                isSingle: false,
                modalLabel: '客户详情',
                newForm: {
                    avatarUrl: '',
                    nickname: '',
                    realName: '',
                    userType: '',
                    mobile: '',
                    gender: '',
                    createTime: '',
                },
                formLabelWidth: '100px',
                data: {},
                columnNames: [{
                    label: '名称',
                    prop: 'couponName',
                    width: 120
                }, {
                    label: '开始时间',
                    prop: 'beginTime',
                    width: 120
                }, {
                    label: '结束时间',
                    prop: 'endTime',
                    width: 120
                }, {
                    label: '满',
                    prop: 'moneyFull',
                    width: 120
                }, {
                    label: '减',
                    prop: 'moneyReduce',
                    width: 120
                }, {
                    label: '经销商',
                    prop: 'storeName',
                    width: 120
                }],
                query: {
                    page: ''
                },
                nickname: '',
                ids: [],
                id: ''

            }
        },
        mounted: function () {
        },
        methods: {
            closeConfirmModal() {
                this.showConfirmModal = false;
            },
            onCancel() {
                this.$emit('onCancelNewModal');
                this.data = {};
            },
            handleCurrentChange(val) {
                this.query.page = val;
                this.listUserCoupon();
            },
            async listUserCoupon(id, nickname) {
                if (!this.$isEmptyStr(id)) {
                    this.id = id;
                }
                if (!this.$isEmptyStr(nickname)) {
                    this.nickname = nickname;
                }
                let res = await this.$api.get('/mall/usercoupon/info/' + this.id, {});
                if (res.code === 0) {
                    this.data = res.page;
                } else {
                    this.$message.error(res.msg);
                }
            },
            batchDeleteRow() {
                let rows = this.$refs.modalTable.selection;
                if (rows.length === 0) {
                    this.$message.warning('请选择一条记录');
                    return;
                } else {
                    let ids = [];
                    for (let row of rows) {
                        ids.push(row.id);
                    }
                    this.ids = ids;
                    this.showConfirmModal = true;
                }
            },
            async submitBatchDeleteRow() {
                let res = await this.$api.post('/mall/usercoupon/delete', this.ids);
                if (res.code === 0) {
                    this.ids = this.$options.data().ids;
                    this.$message.success('删除成功');
                    this.showConfirmModal = false;
                    this.listUserCoupon();
                } else {
                    this.$message.error(res.msg);
                }
            },
            onDelRow(id) {
                this.ids.push(id);
                this.isSingle = true;
                this.showConfirmModal = true;
            },
        }
    }
</script>

<style scoped>
    .product-detail-modal {
        font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 12px;
        color: #676a6c;
    }

    .ele-modal /deep/ .el-dialog__header {
        border-bottom: 1px solid #e5e5e5;
        padding: 5px 0 2px 15px !important;
    }

    .ele-modal /deep/ .el-dialog__body {
        padding: 0 20px 30px 20px;
    }

    .ele-modal /deep/ .el-dialog__footer {
        border-top: 1px solid #e5e5e5;
        padding: 15px;
    }

</style>
